<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>
        请求第{{pagination.current}}页的数据,每页展示{{pagination.pageSize}}条
      </h1>
      <div>
        <button
          v-for="item in pagination.totalPage"
          :key="item"
          @click="pagination.current=item"
        >
          {{item}}
        </button>
        <select name="" id="" v-model="pagination.pageSize">
          <option :value="3">3</option>
          <option :value="5">5</option>
          <option :value="7">7</option>
          <option :value="9">9</option>
        </select>
      </div>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            pagination: {
              //当前页
              current: 1,
              //每页条数
              pageSize: 3,
              //总页数
              totalPage: 6,
            },
          };
        },
        methods: {
          getData() {
            console.log(
              `......请求第{${this.pagination.current}}页的数据,每页展示{${this.pagination.pageSize}}条......`
            );
          },
        },

        /*
          Vue提供了一个watch配置项,可以对数据进行侦听,只要侦听的数据发生了变化,则会触发侦听函数
        */
        watch: {
          //简写这种监听方式只能监听pagination属性保存值的变化,如果pagination属性是一个对象,则内部对象的属性变化的时候,就无法监听到
          //属性名表达式的方式
          ["pagination.current"]() {
            console.log("current变化了", this.pagination.current);
            this.getData();
          },
          "pagination.pageSize"() {
            console.log("pageSize变化了", this.pagination.pageSize);
            this.getData();
          },
        },
      });
    </script>
  </body>
</html>
